<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :lg="4" :md="4" :sm="4" :xl="4" :xs="4">
        <el-card class="access" shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="tools-fill" />
              产品分类
            </div>
          </div>
          <el-menu
            default-active="0"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item
              v-for="(item, index) in menuData"
              :key="index"
              :index="index"
              @click="handleOpen(item)"
            >
              <span>{{ item }}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      <el-col :lg="20" :md="20" :sm="20" :xl="20" :xs="20">
        <el-card class="access" shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="tools-fill" />
              产品信息
            </div>
          </div>
          <div>
            <el-descriptions title="产品信息">
              <el-descriptions-item label="所属项目">
                {{ tableData.AffiliatedProject }}
              </el-descriptions-item>
              <el-descriptions-item label="图纸编号">
                {{ tableData.BulePrintId }}
              </el-descriptions-item>
              <el-descriptions-item label="产品编号">
                {{ tableData.ProductId }}
              </el-descriptions-item>
              <el-descriptions-item label="产品名称">
                {{ tableData.ProductName }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
        <el-card class="access" shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="tools-fill" />
              工序信息
            </div>
            <div>
              <el-button type="primary" size="small" @click="edit('add')">
                添加
              </el-button>
              <el-button size="small" @click="edit('edit')">修改</el-button>
              <el-button type="danger" size="small" @click="del">
                删除当前
              </el-button>
            </div>
          </div>
          <div class="progress-bar1" style="margin: 20px">
            <li
              class=""
              :class="{ active: item.checked }"
              @click="setStep(index)"
              v-for="(item, index) in stepData"
              :key="index"
            >
              <span>{{ item.name }}</span>
            </li>
          </div>
          <div style="display: flex; flex-direction: row; height: 175px">
            <div
              style="width: 50%; height: 175px; background-color: aliceblue"
            ></div>
            <div style="width: 50%; height: 175px">
              <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item>
                  <template slot="label">产品编号</template>
                  {{ OpCardInfo.TiTle.ProductId }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">日期</template>
                  {{ OpCardInfo.TiTle.DateTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">机床型号</template>
                  {{ OpCardInfo.TiTle.DeviceModel }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">工序号</template>
                  {{ OpCardInfo.TiTle.OpId }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">Y坐标</template>
                  {{ OpCardInfo.TiTle.Y }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">Z坐标</template>
                  {{ OpCardInfo.TiTle.Z }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">电话</template>
                  {{ OpCardInfo.TiTle.PhoneNo }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">尺寸</template>
                  {{ OpCardInfo.TiTle.Size }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">装夹方式</template>
                  {{ OpCardInfo.TiTle.TrayWay }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">总时间</template>
                  {{ OpCardInfo.TiTle.Time }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <div>
            <el-table :data="OpCardInfo.Steps" style="width: 100%">
              <el-table-column
                prop="StepsId"
                label="工步编号"
              ></el-table-column>
              <el-table-column prop="Type" label="类别"></el-table-column>
              <el-table-column
                prop="KnifeId"
                label="刀具编号"
              ></el-table-column>
              <el-table-column
                prop="KnifeName"
                label="刀具名称"
              ></el-table-column>
              <el-table-column
                prop="Diameter"
                label="刀具直径"
              ></el-table-column>
              <el-table-column prop="Length" label="刀长"></el-table-column>
              <el-table-column
                prop="BladeLength"
                label="刃长"
              ></el-table-column>
              <el-table-column
                prop="BladeLength"
                label="刃长"
              ></el-table-column>
              <el-table-column
                prop="KnifeHandle"
                label="刀柄"
              ></el-table-column>
              <el-table-column prop="Residue" label="余量"></el-table-column>
              <el-table-column
                prop="CuttingSpeed"
                label="转速"
              ></el-table-column>
              <el-table-column
                prop="TimeToManeuver"
                label="机动时间"
              ></el-table-column>
              <el-table-column prop="Rmask" label="备注"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :close-on-click-modal="false"
      :title="type == 'add' ? '添加' : '编辑'"
      :visible="dialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <el-form ref="form" :inline="true" :model="form" label-width="150px">
        <el-form-item label="产品编号">
          <el-input
            v-model="ProductId"
            placeholder="产品编号"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="工序编号">
          <el-select
            v-model="OpId"
            placeholder="选择工序编号"
            v-if="type == 'add'"
          >
            <el-option
              v-for="item in OpIdList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-input
            v-model="OpId"
            placeholder="工序编号"
            disabled
            v-else
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="form" :inline="true" :model="TiTle" label-width="150px">
        <!-- <el-form-item label="产品编号">
          <el-input v-model="TiTle.ProductId" placeholder="产品编号"></el-input>
        </el-form-item> -->
        <el-form-item label="日期">
          <!-- <el-input v-model="TiTle.DateTime" placeholder="日期"></el-input> -->
          <el-date-picker
            v-model="TiTle.DateTime"
            type="date"
            label="请选择日期"
            placeholder="请开始日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="设备型号">
          <el-select v-model="TiTle.DeviceModel" placeholder="选择设备型号">
            <el-option
              v-for="item in MachineList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="编程者">
          <el-input v-model="TiTle.Developer" placeholder="编程者"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="TiTle.PhoneNo" placeholder="联系方式"></el-input>
        </el-form-item>
        <el-form-item label="装夹方式">
          <el-input v-model="TiTle.TrayWay" placeholder="装夹方式"></el-input>
        </el-form-item>
        <el-form-item label="X坐标">
          <el-input v-model="TiTle.X" placeholder="X坐标"></el-input>
        </el-form-item>
        <el-form-item label="Y坐标">
          <el-input v-model="TiTle.Y" placeholder="Y坐标"></el-input>
        </el-form-item>
        <el-form-item label="Z坐标">
          <el-input v-model="TiTle.Z" placeholder="Z坐标"></el-input>
        </el-form-item>
        <el-form-item label="尺寸">
          <el-input v-model="TiTle.Size" placeholder="尺寸"></el-input>
        </el-form-item>
        <el-form-item label="总时间">
          <el-input v-model="TiTle.Time" placeholder="总时间"></el-input>
        </el-form-item>
      </el-form>

      <vab-form-table
        v-model="Steps"
        drag
        :row-template="rowTemplate"
        style="width: 100%"
      >
        <el-table-column align="center" label="工步编号" prop="StepsId">
          <template #default="{ row }">
            <el-input v-model="row.StepsId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="类别" prop="Type">
          <template #default="{ row }">
            <el-input v-model="row.Type" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="刀具编号" prop="KnifeId">
          <template #default="{ row }">
            <el-input v-model="row.KnifeId" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="刀具名称" prop="KnifeName">
          <template #default="{ row }">
            <el-input v-model="row.KnifeName" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="刀具直径" prop="Diameter">
          <template #default="{ row }">
            <el-input v-model="row.Diameter" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="刀长" prop="Length">
          <template #default="{ row }">
            <el-input v-model="row.Length" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="刃长" prop="BladeLength">
          <template #default="{ row }">
            <el-input v-model="row.BladeLength" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="刀柄" prop="KnifeHandle">
          <template #default="{ row }">
            <el-input v-model="row.KnifeHandle" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="余量" prop="Residue">
          <template #default="{ row }">
            <el-input v-model="row.Residue" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="转速" prop="CuttingSpeed">
          <template #default="{ row }">
            <el-input v-model="row.CuttingSpeed" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="进给量" prop="Feed">
          <template #default="{ row }">
            <el-input v-model="row.Feed" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="Z最深" prop="ZDepth">
          <template #default="{ row }">
            <el-input v-model="row.ZDepth" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="机动时间" prop="TimeToManeuver">
          <template #default="{ row }">
            <el-input v-model="row.TimeToManeuver" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" prop="Rmask">
          <template #default="{ row }">
            <el-input v-model="row.Rmask" />
          </template>
        </el-table-column>
      </vab-form-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import VabFormTable from '@/extra/VabFormTable'
  import {
    ProductionIdsList,
    ProductAllOp,
    ProductNewlyOpFrm,
    ProductAllOpDelete,
    OpCard,
    OpCard1,
    FloBomListChart,
    ProductionInfo,
    GetAllMachine,
  } from '@/api/product'
  import img from './img.js'
  export default {
    components: { VabFormTable },
    data() {
      return {
        rowTemplate: {
          StepsId: '',
          Type: '',
          KnifeId: '',
          KnifeName: '',
          Diameter: '',
          Length: '',
          BladeLength: '',
          KnifeHandle: '',
          Residue: '',
          CuttingSpeed: '',
          Feed: '',
          ZDepth: '',
          TimeToManeuver: '',
          Rmask: '',
        },
        Steps: [],
        tableData: {},
        form: {},
        OPCardInfo: {},
        TiTle: {},
        ProductInfo: {},
        Foot: {},
        dialogVisible: false,
        img,
        menuData: [],
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          MatchString: '',
        },
        total: 0,
        list: [],
        layout: 'total, sizes, prev, pager, next, jumper',

        stepData: [],
        ProductId: '',
        OpId: '',
        type: 'add',
        OpCardInfo: {
          TiTle: {},
          Steps: [],
        },

        stepIndex: 0,
        MachineList: [],

        OpIdList: [
          'OP1',
          'OP2',
          'OP3',
          'OP4',
          'OP5',
          'OP6',
          'OP7',
          'OP8',
          'OP9',
          'OP10',
        ],
      }
    },
    created() {
      this.initData()
    },
    methods: {
      del() {
        ProductAllOpDelete({ OpId: this.OpId, ProductId: this.ProductId }).then(
          (res) => {
            this.$baseMessage('删除成功', 'error', 'vab-hey-message-error')
            // this.setStep(this.stepIndex)
            this.getProductAllOp()
          }
        )
      },
      edit(e) {
        if (e == 'add') {
          this.TiTle = {}
          this.Steps = []
        } else {
          this.TiTle = this.OpCardInfo.TiTle
          this.Steps = this.OpCardInfo.Steps
        }
        GetAllMachine().then((res) => {
          console.log('res1111111', res)
          this.MachineList = res.MachineList
        })
        console.log('editedit', this.OpCardInfo)
        this.type = e
        this.dialogVisible = true
      },
      getFoot() {
        return [
          {
            MarkVal: this.Foot.MarkVal1,
            PlaceNumVal: this.Foot.PlaceNumVal1,
            ChangeFileNumVal: this.Foot.ChangeFileNumVal1,
            SignVal: this.Foot.SignVal1,
            DateVal: this.Foot.DateVal1,
            Mark2Val: this.Foot.Mark2Val1,
            PlaceNum2Val: this.Foot.PlaceNum2Val1,
            ChangeFileNum2Val: this.Foot.ChangeFileNum2Val1,
            Sign2Val: this.Foot.Sign2Val1,
            Date2Val: this.Foot.Date2Val1,
          },
          {
            MarkVal: this.Foot.MarkVal2,
            PlaceNumVal: this.Foot.PlaceNumVal2,
            ChangeFileNumVal: this.Foot.ChangeFileNumVal2,
            SignVal: this.Foot.SignVal2,
            DateVal: this.Foot.DateVal2,
            Mark2Val: this.Foot.Mark2Val1,
            PlaceNum2Val: this.Foot.PlaceNum2Val2,
            ChangeFileNum2Val: this.Foot.ChangeFileNum2Val2,
            Sign2Val: this.Foot.Sign2Val2,
            Date2Val: this.Foot.Date2Val2,
          },
        ]
      },
      submit() {
        this.TiTle.DateTime = this.days(this.TiTle.DateTime)
        this.TiTle.OpId = this.OpId
        this.OpCardInfo = {
          TiTle: this.TiTle,
          Steps: this.Steps,
        }
        console.log(this.OPCardInfo)
        this.form.ProductId = this.ProductId
        this.form.OpId = this.OpId

        this.form.OpCardInfo = this.OpCardInfo

        ProductNewlyOpFrm(this.form).then((res) => {
          console.log('resres', res)
          this.dialogVisible = false
        })
      },
      setStep(index) {
        this.stepData.map((v) => {
          v.checked = false
          return v
        })
        this.stepData[index].checked = true
        this.stepIndex = index
        this.OpId = this.stepData[index].name
        OpCard1({ OpId: this.OpId, ProductId: this.ProductId }).then((res) => {
          console.log('res111111111', res)
          this.OpCardInfo = res.OpCardInfo
            ? res.OpCardInfo
            : { TiTle: {}, Steps: [] }
          // this.Steps = res.OpCardInfo.Steps
        })
      },
      handleClose(done) {
        this.dialogVisible = false
      },
      handleOpen(ProductId) {
        this.fetchData2(ProductId)
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData2()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData2()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData2()
      },
      fetchData1() {
        ProductionIdsList({ Index: 0, Count: 10 }).then((res) => {
          this.menuData = res.Productions
          this.fetchData2(res.Productions[0])
        })
      },
      fetchData2(ProductId) {
        this.ProductId = ProductId
        ProductionInfo({ ProductId }).then((res) => {
          this.tableData = res.ProductInfo
        })
        this.getProductAllOp()
      },
      getProductAllOp() {
        ProductAllOp({ ProductId: this.ProductId }).then((res) => {
          this.stepData = res.ProductAllOp.map((v) => {
            return {
              name: v,
              checked: false,
            }
          })
          console.log('this.stepDatathis.stepData', this.stepData)
          this.setStep(0)
        })
      },
      initData() {
        this.fetchData1()
      },
    },
  }
</script>

<style>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .progress-bar1 li {
    padding: 0px 20px;
    line-height: 40px;
    background: #999;
    display: inline-block;
    color: #fff;
    position: relative;
    width: 180px;
    text-align: center;
    cursor: pointer;
  }

  .progress-bar1 li:after {
    content: '';
    display: block;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #999;
    position: absolute;
    right: -20px;
    top: 0;
    z-index: 10;
  }

  .progress-bar1 li:before {
    content: '';
    display: block;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #fff;
    position: absolute;
    left: 0px;
    top: 0;
  }

  .progress-bar1 li {
    padding-left: 25px;
  }

  .progress-bar1 li:first-child {
    border-radius: 4px 0 0 4px;
  }

  .progress-bar1 li:first-child:before {
    display: none;
  }

  .progress-bar1 li.active {
    background-color: #1890ff;
  }

  .progress-bar1 li.active:after {
    border-left-color: #1890ff;
  }
</style>
